{{define "Koma/article.html"}}
<!DOCTYPE html>
<html>
<head>
    {{template "head/head" .}}
    {{template "head/3rdstatistic" .}}
    {{template "head/article" .}}
</head>
<body>
<div id="pjax">
    {{if .pjax}}{{noescape "<!---- pjax {#pjax} start ---->"}}{{end}}
{{template "Koma/side" .}}
<div class="main">
    <article class="article__item">
        <header class="article__header{{if gt $.UserCount 1}} article__header--user{{end}}">
            <h2>
                <a class="article__title" rel="bookmark" href="{{.Article.URL}}">
                    {{if .Article.Topped}}
                    <svg>
                        <use xlink:href="#icon-focus"></use>
                    </svg>
                    {{end}}
                    {{.Article.Title}}
                </a>
            </h2>
            <time class="article__time{{if gt $.UserCount 1}} article__time--user{{end}}">{{.Article.CreatedAt}}</time>
            {{if gt $.UserCount 1}}
            <a rel="nofollow"
               class="avatar pipe-tooltipped pipe-tooltipped--n"
               aria-label="{{.Article.Author.Name}}"
               data-src="{{.Article.Author.AvatarURLWithSize 116}}"
               href="{{.Article.Author.URL}}">
            </a>
            {{end}}
        </header>
        <section class="vditor-reset article__abstract" id="articleContent" data-author="{{.Article.Author.Name}}">
            {{.Article.Content}}
        </section>
        <div class="article__footer fn__clear">
            <span class="article__share">
                <span class="article__share-btn article__share-btn--wechat" data-type="wechat">
                    <svg><use xlink:href="#wechat"></use></svg>
                </span>
                <span class="article__share-btn article__share-btn--weibo" data-type="weibo">
                    <svg><use xlink:href="#weibo"></use></svg>
                </span>
                <span class="article__share-btn article__share-btn--twitter" data-type="twitter">
                    <svg><use xlink:href="#twitter"></use></svg>
                </span>
                <span class="article__share-btn article__share-btn--google" data-type="google">
                    <svg><use xlink:href="#google"></use></svg>
                </span>
                <div class="article__code"
                     data-title="{{.Article.Title}}"
                     data-blogtitle="{{$.Setting.BasicBlogTitle}}"
                     data-url="{{.Article.URL}}"
                     data-avatar="{{.Article.Author.AvatarURLWithSize 128}}"></div>
            </span>
            <div class="fn__left">
                <svg>
                    <use xlink:href="#icon-tag"></use>
                </svg>
                {{range .Article.Tags}}
                <a class="tag" rel="tag" href="{{.URL}}">{{.Title}}</a>
                {{end}}
            </div>
            <span class="fn__right">
                <a href="{{.Article.URL}}" aria-label="{{$.I18n.View}}"
                   class="pipe-tooltipped pipe-tooltipped--n">
                    <span data-uvstaturl="{{.Article.URL}}">{{.Article.ViewCount}}</span>
                    <svg>
                        <use xlink:href="#icon-view"></use>
                    </svg>
                </a>

                {{if $.Commentable}}
                <a href="{{.Article.URL}}#b3logPipeComments" aria-label="{{$.I18n.Comment}}"
                   class="pipe-tooltipped pipe-tooltipped--n">
                     <span data-uvstatcmt="{{.Article.ID}}">{{.Article.CommentCount}}</span>
                    <svg>
                        <use xlink:href="#icon-comment"></use>
                    </svg>
                </a>
                {{end}}

                {{if .Article.Editable}}
                <a href="{{$.Conf.Server}}/admin/articles/post?id={{.Article.ID}}"
                   aria-label="{{$.I18n.Edit}}"
                   class="pipe-tooltipped pipe-tooltipped--n    ">&nbsp;<svg>
                        <use xlink:href="#icon-edit"></use>
                    </svg>
                </a>
                {{end}}
            </span>
        </div>
    </article>

    <div id="b3logPipeComments"></div>
    {{if .Commentable}}
    <article class="article__item">
    <div id="vcomment" style="padding: 15px 30px;" data-name="{{.Article.Author.Name}}" data-postId="{{.Article.ID}}"></div>
    {{template "comment/comments" .}}
    </article>
    {{end}}

    <article class="article__item">
        {{if gt (len .RecommendArticles) 0}}
        <header class="article__header">
            <h2 class="relevant__title">{{$.I18n.RecommendArticle}}</h2>

            <div class="article__time">
                {{if .PreviousArticle}}
                <a href="{{.PreviousArticle.URL}}" rel="prev"
                   class="pipe-tooltipped pipe-tooltipped--w article__neighbor"
                   aria-label="{{.I18n.PreArticle}}{{.I18n.Colon}}{{.PreviousArticle.Title}}">&nbsp;<svg>
                        <use xlink:href="#icon-chevron-left"></use>
                    </svg>
                </a>
                {{end}}
                {{if .NextArticle}}
                <a href="{{.NextArticle.URL}}" rel="next"
                   class="pipe-tooltipped pipe-tooltipped--w article__neighbor"
                   aria-label="{{.I18n.NextArticle}}{{.I18n.Colon}}{{.NextArticle.Title}}">
                    <svg>
                        <use xlink:href="#icon-chevron-right"></use>
                    </svg>
                </a>
                {{end}}
            </div>
        </header>
        {{range $index, $item := .RecommendArticles}}
        <div class="relevant__item">
            <a href="{{$item.URL}}" target="_blank">{{$item.Title}}</a>
            <div class="relevant__content">
                <a class="relevant__thumbnail"
                   href="{{$item.URL}}"
                   data-src="{{$item.ThumbnailURL}}" target="_blank"></a>
                <div>
                    <a href="{{$item.URL}}" class="relevant__abstract" target="_blank">
                        {{$item.Abstract}}
                    </a>
                    <div class="relevant__meta fn__clear">
                        <a class="relevant__avatar pipe-tooltipped pipe-tooltipped--w"
                           aria-label="{{$item.Author.Name}}"
                           data-src="{{$item.Author.AvatarURL}}"
                           href="{{$item.Author.URL}}" target="_blank"></a>
                        <span class="fn__left ft__fade">{{$item.CreatedAt}} &nbsp; &nbsp;</span>
                        {{if $.Commentable}}
                        <a href="{{$item.URL}}#comments"
                           class="ft__fade" target="_blank">
                            <span data-uvstatcmt="{{$item.ID}}">{{$item.CommentCount}}</span>
                            {{$.I18n.Comment}}
                        </a>
                        {{end}}
                    </div>
                </div>
            </div>
        </div>
        {{end}}
        {{end}}
    </article>
    {{template "comment/editor" .}}
    {{template "Koma/footer" .}}
</div>
    {{if .pjax}}{{noescape "<!---- pjax {#pjax} end ---->"}}{{end}}
</div>
</body>
</html>
{{end}}
